<script setup>
const route = useRoute();
const articles = {
  1: {
    title: "Nuxt3 入门指南",
    content: "Nuxt3 是一个基于 Vue 3 的全栈框架...",
  },
  2: {
    title: "Vue 组合式 API",
    content: "Vue3 组合式 API 让代码更易于组织和复用...",
  },
  3: { title: "JavaScript ES6+ 特性", content: "JavaScript 近年来发展迅速..." },
};

const post = articles[route.params.id] || {
  title: "文章未找到",
  content: "该文章不存在。",
};
</script>

<template>
  <div class="blog-post">
    <h2>{{ post.title }}</h2>
    <p>{{ post.content }}</p>
    <NuxtLink to="/blog">🔙 返回博客列表</NuxtLink>
  </div>
</template>

<style scoped>
.blog-post {
  max-width: 600px;
  margin: 40px auto;
  padding: 20px;
  background: white;
  border-radius: 8px;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}
a {
  color: #007bff;
  text-decoration: none;
}
a:hover {
  text-decoration: underline;
}
</style>
